<template>
  <div class="app-container">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel">
                <div class="panel-body">
                     {{title}}
                </div>
            </div>    
        </div>
    </div>
     <div class="row">
        <div class="col-lg-12">
            <div class="panel">
                <div class="panel-body">
                     <el-form class="small-space" :model="formParam" :rules="rules" ref="formParam" label-position="left" label-width="120px">
                        <el-form-item label="原密码" prop="password">
                            <el-input type="password" v-model="formParam.password" ></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="newPassword">
                            <el-input type="password" v-model="formParam.newPassword" ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="update('formParam')" :loading="dialogFormVisible">保存</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>    
        </div>
    </div>

    
  </div>
</template>
<style>
.w-e-menu{
  z-index: 2 !important;
}
.w-e-text-container{
    z-index: 1 !important;
}
.checkbox-inline > input {
    margin-top: 12px;
	border:none;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<script>
    import { mapGetters } from 'vuex';
    import md5 from 'js-md5';
    export default {
      name: 'menu_add',
      data() {
        const validatePass = (rule, value, callback) => {
          if (value.length < 6) {
            callback(new Error('密码不能小于6位'));
          } else {
            callback();
          }
        };
        return {
            menuList:[],
            formParam: {
                uuid: null,
                userName:'',
                password:'',
                newPassword:''
            },
            rules: {
                password: [
                    { required: true, trigger: 'blur', validator: validatePass }
                ],
                newPassword: [
                    { required: true, trigger: 'blur', validator: validatePass }
                ]
            },
            dialogFormVisible:false
        }
      },
      computed: {
        ...mapGetters([
          'userData'
        ]),
        title(){
            return this.$route.meta.title
        }
      },
      mounted: function () {
        this.$nextTick(function () {
            // console.log(this.userData)
            this.formParam.uuid = this.userData.uuid
            this.formParam.userName = this.userData.userName
        });
      },
      methods: {
        update(formName){
            let _this = this;
            // console.log(this.formParam)
            this.$refs[formName].validate(function(valid){
                if (valid) {
                    let parm = _this.formParam;
                    parm.password = md5(parm.password)
                    parm.newPassword = md5(parm.newPassword)
                    _this.Api.settings.resetPassword(parm).then((data)=>{
                        if(data.code == _this.Api.resultCode.SUSS){
                            _this.dialogFormVisible = false;
                            _this.$notify({
                                title: '成功',
                                message: data.msg,
                                type: 'success',
                                duration: 2000
                            });
                            _this.$store.dispatch('LOGOUT').then(() => {
                                location.reload();
                            }).catch(err => {
                                console.log(err);
                            });
                        }
                    });
                }
            }) 
        }
      }
    };
</script>
